<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入 Bootstrap -->
<link href="./css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="js/kindeditor/themes/default/default.css" />
<script type="text/javascript" src="./js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="./js/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
var editor;
var journalId = sessionStorage.getItem("manger_journal_id");
$(function() {
	//KindEditor4
	editor = KindEditor.create('textarea[id="addcontent"]', {
		allowFileManager : true
	});
	initInfo();
});
function initInfo() {
	var templateHtml = $("#panelTemplate").html();
	var journalHtml = '';
	var journalDetailHtml = '';
	sessionStorage.setItem("journalType",$("#journalType").val());
	var template_journalDetal='';
	$.ajax({
		type : "POST",
		url : "findJournalByIdJson",
		dataType : "json",
		data : {
			"id" : journalId
		},
		success : function(data) {
			var journal = data.journal;
			var journalDetails = data.journalDetails;
			var tmpHtml = templateHtml;
			tmpHtml = tmpHtml.replace("journal_title", journal.title);
			tmpHtml = tmpHtml.replace("journal_content", journal.content);
			var index=0;
			$.each(journalDetails, function(i, item) {
				index++;
				journalDetailHtml += '<div style=""><hr/><h5>'+index+'</h5><div class="well">' + item.content + 
				'</div><button type="button" onclick="fun_delJournalDetail(\''+item.id+'\','+index+')" '+
				'class="btn btn-danger" data-toggle="button">删除</button></div>';
			});
			tmpHtml = tmpHtml.replace("journalDetail_content",
					journalDetailHtml);
			$("#content").html(tmpHtml);

		}
	});

}
//保存详情
function saveJournal() {
	$("#addcontent").text(editor.html());
	var title = $("#title").val();
	var content = $("#addcontent").text();
	if (content == "") {
		return;
	}
	$.ajax({
		type : "POST",
		url : "saveJournalDetail",
		dataType : "text",
		data : {
			"content" : content,
			"journalId":journalId
		},
		success : function(data) {
				alert("保存成功");
				initInfo();
		},
		error : function(data) {
			alert("error" + data);
		}
	});
}
function fun_delJournalDetail(id,index){
	if(confirm("确定要删除第"+index+"项内容?")){
		$.ajax({
			type : "POST",
			url : "deleteJournalDetail",
			dataType : "text",
			data : {
				"id":id
			},
			success : function(data) {
					alert("删除成功");
					initInfo();
			},
			error : function(data) {
				alert("error" + data);
			}
		});
	}
	
	
}
function fun_toJournalList(){
	location.href="addJournal.html";
}
</script>
</head>

<body>
	<div id="box" style="width: 90%; margin: 0 auto;">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加内容</h3>
			</div>
			<div class="panel-body"></div>
			<div id="">
				<button type="button" onclick="fun_toJournalList()"
					class="btn btn-primary" data-toggle="button">回到列表</button>
				<form class="form-horizontal" role="form">

					<div class="form-group">
						<label class="col-sm-2 control-label">内容</label>
						<div class="col-sm-10">
							<textarea id="addcontent" name="content"
								style="width: 600px; height: 260px; visibility: hidden;"
								rows="5" cols="20"></textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="button" onclick="saveJournal()"
								class="btn btn-default">保存</button>
						</div>
					</div>
				</form>

			</div>
		</div>
		<div id="content"></div>
	</div>
	<div id="panelTemplate" style="display: none;">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">journal_title</h3>
			</div>
			<div class="panel-body">journal_content</div>
			<div id="journalDetailDiv">journalDetail_content</div>
		</div>
	</div>
</body>
</html>